import React, {Component} from 'react';
import {Button, Typography, Divider, Row, Col, Form, Input, Checkbox, Table, Image, Tag} from 'antd';

import {PlusOutlined, TrademarkOutlined} from '@ant-design/icons';
/* 导入该样式文件，因为该文件里面包含了 antd 的样式文件*/
import './App.css';
import {login} from './api/user';
import {getNews} from './api/news';


const {Title, Text, Link} = Typography;

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            newsList: [],
            total: 0,
            pageSize: 2,
            current: 1,
        }
    }

    componentDidMount() {
        this.getNews();
    }

    getNews = async (page = 1, pageSize = 2) => {
        let info = await getNews(page, pageSize);
        console.log(info.data);
        if (info.data.statusCode == 200) {
            this.setState({
                newsList: info.data.data.list,
                total: info.data.data.total,
            })

        }
    }


    /**
     * 表单成功通过验证后的回调函数
     */
    onFinish = async (userInfo) => {
        console.log(userInfo);
        /* 只需要调用一下后台的接口即可完成登录功能*/
        let info = await login(userInfo);
        console.log(info.data);
        this.setState({
            userInfo: info.data.data.userInfo,
        })

    }

    /**
     * 验证不通过时候 失败的回调
     */
    onFinishFailed = (error) => {
        console.log(error);
    }

    dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ];

    columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text, record, index) => {
                console.log(text, record, index);

                return <div>【{text}】</div>;
            }
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ]

    newsColumns = [
        {
            title: 'ID',
            dataIndex: '_id',
            key: '_id',
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },

        {
            title: '浏览次数',
            dataIndex: 'viewCount',
            key: 'viewCount',
            /*超过1000之后，显示红色，否则显示绿色*/
            render: (text) => {
                return (
                    <Tag color={text >= 50000 ? '#f50' : '#87d068'}>{text}</Tag>
                )
            }
        },

        {
            title: '封面图',
            dataIndex: 'imageUrl',
            key: 'imageUrl',
            render: (text, record, index) => {
                return (
                    <Image
                        width={100}
                        src={'https://yw.52kfw.cn' + text}
                    />
                )
            }

        },


    ]


    pageChange = (page, pageSize) => {
        console.log(page, pageSize);
        this.setState({
            current: page,
        }, () => {
            this.getNews(page, pageSize);
        })
    }


    render() {
        return (
            <div>
                <Row className="row">
                    <Col span={24}>
                        <Title>antd的使用</Title>
                        <hr/>
                        <Text>Ant Design (default)</Text>
                        <Text type="secondary">Ant Design (secondary)</Text>
                        <Text type="success">Ant Design (success)</Text>
                        <Text type="warning">Ant Design (warning)</Text>
                        <Text type="danger">Ant Design (danger)</Text>
                        <Text disabled>Ant Design (disabled)</Text>
                        <Text mark>Ant Design (mark)</Text>

                        <Divider/>
                        {/*hr*/}
                        <p style={{color: '#f00'}}>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam cupiditate fuga
                            nisi non! At cum est nam, necessitatibus nesciunt non quae reprehenderit sequi. Excepturi
                            facere quasi qui quod. Est.
                        </p>
                        <Divider dashed/>

                    </Col>
                </Row>
                <Row className="row">
                    <Col className="col" span={12}>col-12</Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <h2>通用性的组件库</h2>
                        <h3>按钮-button</h3>
                        <Button size="large" shape="circle" type="primary">5</Button>
                        <Button icon={<PlusOutlined/>} shape="round" type="primary">Primary Button</Button>
                        <Button icon={<TrademarkOutlined/>}>Default Button</Button>
                        <Button size="small" loading={true} type="dashed">Dashed Button</Button>
                        <br/>
                        <Button type="text">Text Button</Button>
                        <Button type="link">Link Button</Button>
                    </Col>
                </Row>

                <Row>
                    <Col span={8}>
                        <h2>表单相关的组件库和操作</h2>
                        <Divider/>
                        <Form
                            name="basic"
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[
                                    {
                                        required: true,
                                        message: '用户名不能为空',
                                    },
                                ]}
                            >
                                <Input/>
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空',
                                    },
                                ]}
                            >
                                <Input.Password/>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </Col>
                    <Col>
                        <p>当前登录的用户名：{this.state.userInfo.name}</p>
                        <p>当前登录的头像：<img src={'https://yw.52kfw.cn' + this.state.userInfo.imageUrl} alt=""/></p>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <h2>table展示组件的使用</h2>
                        <Divider/>
                        <Table dataSource={this.dataSource} columns={this.columns}/>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <h2>新闻的展示</h2>
                        <Divider/>
                        <Table
                            dataSource={this.state.newsList}
                            columns={this.newsColumns}
                            pagination={{
                                total: this.state.total,
                                pageSize: this.state.pageSize,
                                current: this.state.current,
                                onChange: this.pageChange
                            }}
                        />
                    </Col>
                </Row>


            </div>
        );
    }
}

export default App;
